<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 2 - Flex布局侧边栏折叠与展开</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            overflow: hidden;
        }

        .header {
            background: #4a6fa5;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .content-wrapper {
            display: flex;
            height: calc(100vh - 420px);
            position: relative;
        }

        .left-panel {
            flex: 70%;
            background: #f8f9fa;
            padding: 25px;
            transition: flex 0.4s ease, opacity 0.4s ease;
            border-right: 1px solid #eaeaea;
            position: relative;
        }

        .right-panel {
            flex: 30%;
            background: white;
            padding: 25px;
            position: relative;
            transition: flex 0.4s ease, opacity 0.4s ease;
            overflow: hidden;
            border-left: 1px solid #eaeaea;
        }

        .toggle-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #4a6fa5;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            z-index: 10;
        }

        .toggle-btn:hover {
            background: #385d8a;
            transform: scale(1.05);
        }

        .expand-btn {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #4a6fa5;
            color: white;
            border: none;
            border-radius: 20px;
            padding: 8px 15px;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            opacity: 0;
            pointer-events: none;
            z-index: 5;
        }

        .expand-btn.show {
            opacity: 1;
            pointer-events: auto;
        }

        .expand-btn:hover {
            background: #385d8a;
            transform: scale(1.05);
        }

        .panel-content {
            margin-top: 30px;
        }

        h2 {
            color: #4a6fa5;
            margin-bottom: 15px;
            border-bottom: 2px solid #eaeaea;
            padding-bottom: 10px;
        }

        p {
            line-height: 1.6;
            color: #555;
            margin-bottom: 15px;
        }

        .collapsed {
            flex: 0 0 0%;
            /* 明确指定flex-grow, flex-shrink, flex-basis */
            width: 0;
            padding: 0;
            margin: 0;
            opacity: 0;
            visibility: hidden;
            border: none;
        }

        .expanded {
            flex: 100%;
        }

        .feature-list {
            list-style: none;
            margin: 20px 0;
        }

        .feature-list li {
            padding: 10px 0;
            border-bottom: 1px dashed #ddd;
            display: flex;
            align-items: center;
        }

        .feature-list li:before {
            content: "✓";
            color: #4a6fa5;
            font-weight: bold;
            margin-right: 10px;
        }

        .code-example {
            background: #2d3a4b;
            color: #f8f8f2;
            padding: 15px;
            border-radius: 5px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            margin: 20px 0;
        }

        .footer {
            text-align: center;
            padding: 15px;
            background: #f1f1f1;
            color: #666;
            font-size: 0.9em;
        }

        .stat-box {
            display: flex;
            justify-content: space-around;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .stat-item {
            background: #f0f5ff;
            border-radius: 8px;
            padding: 15px;
            margin: 10px;
            text-align: center;
            flex: 1;
            min-width: 120px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #4a6fa5;
            margin: 10px 0;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <div class="header">
            <h1>Vue 2实现 - Flex布局侧边栏折叠与展开</h1>
            <p>点击右侧面板右上角按钮查看折叠效果，收起后左侧会出现展开按钮</p>
        </div>

        <div class="content-wrapper">
            <div class="left-panel" :class="{ 'expanded': isCollapsed }">
                <button class="expand-btn" :class="{ 'show': isCollapsed }" @click="expandSidebar">
                    <i class="fas fa-expand"></i> 展开侧边栏
                </button>

                <h2>主内容区域</h2>
                <p>这是一个使用Vue 2和Flex布局实现的页面结构。左侧内容区域默认占据70%的宽度，右侧面板占据30%的宽度。</p>

                <div class="code-example">
                    // Vue 2实现侧边栏折叠<br>
                    &lt;div class="content-wrapper"&gt;<br>
                    &nbsp;&nbsp;&lt;div class="left-panel" :class="{ 'expanded': isCollapsed }"&gt;<br>
                    &nbsp;&nbsp;&lt;div class="right-panel" :class="{ 'collapsed': isCollapsed }"&gt;<br>
                    <br>
                    data() {<br>
                    &nbsp;&nbsp;return {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;isCollapsed: false<br>
                    &nbsp;&nbsp;}<br>
                    }
                </div>

                <p>当点击右侧面板上的按钮时，右侧面板会平滑地折叠起来，同时左侧面板会扩展至100%宽度，并且左侧会出现一个展开按钮。</p>

                <h3>Vue 2的优势：</h3>
                <ul class="feature-list">
                    <li>响应式数据绑定</li>
                    <li>组件化开发</li>
                    <li>简洁的模板语法</li>
                    <li>灵活的过渡动画</li>
                    <li>丰富的生态系统</li>
                </ul>

                <div class="stat-box">
                    <div class="stat-item">
                        <div class="stat-value">92%</div>
                        <div class="stat-label">用户满意度</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">87%</div>
                        <div class="stat-label">任务完成率</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value">78%</div>
                        <div class="stat-label">性能提升</div>
                    </div>
                </div>
            </div>

            <div class="right-panel" :class="{ 'collapsed': isCollapsed }">
                <button class="toggle-btn" @click="toggleSidebar">
                    <i :class="isCollapsed ? 'fas fa-expand' : 'fas fa-compress'"></i>
                </button>

                <h2>侧边栏</h2>
                <p>这是一个可折叠的侧边栏，包含一些附加信息和操作。</p>

                <div class="panel-content">
                    <h3>功能列表</h3>
                    <ul class="feature-list">
                        <li>用户设置</li>
                        <li>通知中心</li>
                        <li>最近活动</li>
                        <li>收藏项目</li>
                        <li>系统配置</li>
                        <li>帮助文档</li>
                    </ul>

                    <h3>今日统计</h3>
                    <div class="stat-box">
                        <div class="stat-item">
                            <div class="stat-value">124</div>
                            <div class="stat-label">今日访问</div>
                        </div>
                        <div class="stat-item">
                            <div class="stat-value">18</div>
                            <div class="stat-label">本周任务</div>
                        </div>
                    </div>

                    <h3>消息通知</h3>
                    <p>您有3条未读消息</p>
                    <p>2个待处理任务</p>
                    <p>系统更新将于今晚进行</p>
                </div>
            </div>
        </div>

        <div class="footer">
            <p>Vue 2实现的Flex布局侧边栏折叠与展开示例</p>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                isCollapsed: false
            },
            methods: {
                toggleSidebar() {
                    this.isCollapsed = !this.isCollapsed;
                },
                expandSidebar() {
                    this.isCollapsed = false;
                },
                handleResponsive() {
                    if (window.innerWidth <= 768) {
                        // 移动设备上默认收起侧边栏
                        if (!this.isCollapsed) {
                            this.isCollapsed = true;
                        }
                    } else {
                        // 大屏幕上默认展开侧边栏
                        if (this.isCollapsed) {
                            this.isCollapsed = false;
                        }
                    }
                }
            },
            mounted() {
                // 响应式处理
                this.handleResponsive();
                window.addEventListener('resize', this.handleResponsive);
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.handleResponsive);
            }
        });
    </script>
</body>

</html>